const textarea = document.querySelector('.input .textarea textarea')
const btn = document.querySelector('.input .textarea .submit')
let arr = JSON.parse(localStorage.getItem('liuyan')) || []
render()
btn.addEventListener('click', function (e) {
    e.preventDefault()
    arr = JSON.parse(localStorage.getItem('liuyan')) || []
    if (textarea.value !== '') {
        const date = new Date()
        const d = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes()
        arr.unshift({
            value: textarea.value,
            Time: d
        })
    }
    render()
    textarea.value = ''
    localStorage.setItem('liuyan', JSON.stringify(arr))


})
function render() {
    document.querySelector('.content span').innerHTML = arr.length
    const arr1 = arr.map(function (ele, index) {
        return `<div class="massage">
        <img src="" alt="">
        <p class="uname">王子殿下<span>${ele.Time}</span></p>
        <div class="text">${ele.value}</div>
        <a href="#" data-id='${index}'>删除</a>
         </div>`
    })
    document.querySelector('.liuyan').innerHTML = arr1.join('')
}
document.querySelector('.liuyan').addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        if (confirm('你确定要删除吗？')) {
            arr.splice(e.target.dataset.id, 1)
            render()
            localStorage.setItem('liuyan', JSON.stringify(arr))
        }
    }
})
